<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
    <style>
        #box1 { 
        width:500px;
        height:500px;
        background-color: teal;
    }
    #box2 { 
        width:400px;
        height:400px;
        background-color: pink;
    }
    #box3 { 
        width:300px;
        height:300px;
        background-color: #ccfc;
    }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <a id="baidu" href="#">百度</a>
</body>
<script>
    var box1 = document.getElementById('box1')
    var box2 = document.getElementById('box2')
    var box3 = document.getElementById('box3')
    var baidu = document.getElementById('baidu');
    //事件冒泡
    box1.onclick = function(e){
        console.log('box1')
        // console.log(e)
    }
    box2.onclick = function(){
        console.log('box2')
    }
    box3.onclick = function(e){
        console.log('box3')
        e.stopPropagation();
    }
    document.body.onclick = function(){
        console.log('body')
    }

    baidu.onclick = function(e){
        alert(999)
        e.preventDefault();
        window.e
    }
</script>
</html>